<template>
	<view class="nav"><text v-for="(item,index) in bewilder" :key="index" :class="[index===idx?'active':'normal']" @click="navclick(index)">{{item.dilute}}</text></view>
</template>

<script setup>
	import {reactive, ref} from 'vue'
	const bewilder = reactive([
		{id:1,dilute:"稀释"},
		{id:2,dilute:"犯错误"},
		{id:3,dilute:"美食"},
		{id:4,dilute:"穿搭"},
		{id:5,dilute:"推荐"},
		{id:6,dilute:"职场"},
	])
	const idx = ref(0)
	const navclick = (index) => {
		idx.value = index 
	}
	
</script>

<style lang="less">
	.nav{
		display: flex;align-items: center;justify-content: space-around;
		.active {
			background-color:antiquewhite;font-weight:bold;padding:3px 8px;border-radius:40px;
		}
		.normal {
			background-color: initial;font-weight: initial;padding: inherit;border-radius: initial;
		}
	}
</style>